<template>
  <!--注册界面-->
  <div id="singIn">
    <div class="myForm">
      <span id="fromTitle" class="animate__animated animate__slideInDown">{{$store.state.noteList.appTitle}}注册</span>
      <el-form ref="insertForm"
               :model="insertForm"
               :rules="loginRules"
               class="animate__animated animate__slideInDown"
               status-icon label-width="100px">
        <el-form-item label="昵称"
                      prop="name"
                      class="inputStyle">
          <el-input  v-model="insertForm.name"
                     :readonly="isSingIn"
                     placeholder="请输入使用该应用时的昵称"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email" class="inputStyle">
          <el-input type="email" v-model="insertForm.email"
                    :readonly="isSingIn"
                    placeholder="请输入对应的邮箱"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass" class="inputStyle">
          <el-input type="password" v-model="insertForm.pass"
                    placeholder="请输入密码"
                    :readonly="isSingIn"
                    autocomplete="off"
          ></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="checkPass" class="inputStyle">
          <el-input type="password" v-model="insertForm.checkPass"
                    placeholder="请再次输入密码"
                    :readonly="isSingIn"
                    autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="sendCode">
          <el-col :span="9">
            <el-input v-model="insertForm.sendCode"
                      placeholder="请输入验证码"
                      :readonly="isSingIn"></el-input>
          </el-col>
          <el-col :span="2">
            &nbsp;
          </el-col>
          <el-col :span="11">
            <el-button :disabled="buttonDis"
                       :readonly="isSingIn"
                       round
                       @click="sendCode">{{buttonText}}</el-button>
          </el-col>

        </el-form-item>

        <el-form-item>
          <el-button type="primary"
                     @click="insertUser('insertForm')"
                     :loading="isSingIn"
                     round
                     class="buttonStyle">{{SingText}}</el-button>
          <el-button @click="reBack"
                     round
                     :disabled="isSingIn"
                     class="buttonStyle">返回登陆</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
import {Form, Input} from "element-ui";

export default {
  name: "SingIn",
  components: {
    Input,
    Form,
  },
  data() {
    let validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.insertForm.checkPass !== '') {
          this.$refs.insertForm.validateField('checkPass');
        }
        callback();
      }
    };
    let validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.insertForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      buttonText: '发送验证码',
      buttonDis: false,
      insertForm: {
        name: '',
        pass: '',
        checkPass: '',
        email: '',
        sendCode: '',
      },
      loginRules: {
        pass: [
          {required: true,validator: validatePass, trigger: 'blur'}
        ],
        checkPass: [
          {required: true,validator: validatePass2, trigger: 'blur'}
        ],
        name: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
        ],
        sendCode:[
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ],
      },
      isSingIn: false, //是否在注册中
      SingText: "立即注册"
    };
  },
  methods: {
    //发送验证码
    sendCode(){
      //用户邮箱地址不为空 就获取验证码
      let re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/
      if (this.insertForm.email !== ''){
        //通过正则表达式判断邮箱是否合法
        if (re.test(this.insertForm.email)){
          //获取验证码倒计时
          this.buttonDis = true;//按钮设置为不可点击
          let time = 60;  //设置时间
          let set_name = setInterval(()=>{
            this.buttonText = "获取验证码"+time+"s";
            time--;
            if (time === 0){
              clearInterval(set_name);
              this.buttonDis = false;
              this.buttonText = "重新获取验证码";
            }
          },1000);
          //发送请求
          this.$axios({
            url: '/noteUser/sendCode/'+this.insertForm.email+'&'+false,
            method: 'GET',
          }).then( response =>{
            if (response.data.noteCode!==200){
              this.isSingIn = false;
              this.SingText = "立即注册"
              this.$message.error(response.data.noteMessage);
            }
          }).catch( error =>{
            this.isSingIn = false;
            this.SingText = "立即注册"
            this.$message.error('请求超时...');
          })

        }else {
          this.$message.error('请输入合法的邮箱!');
        }
      }else{
        this.$message.error('邮箱不能为空!');
      }
    },

    insertUser(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.isSingIn = true; //注册中 改变状态
          this.SingText = "注册中..."
          //上传参数
          let loginData = this.$qs.stringify({
            name: this.insertForm.name,
            userEmail: this.insertForm.email,
            password: this.insertForm.pass,
            inputCode: this.insertForm.sendCode,
          })
          //发送请求
          this.$axios({
            url: '/noteUser/userInsert',
            method: 'POST',
            data: loginData
          }).then( response =>{
            console.log(response.data);
            //修改按钮状态
            this.isSingIn = false;
            this.SingText = "立即注册"
            //登陆成功
            if (response.data.noteCode === 200){
              //提示用户登陆成功
              this.$alert('您的账号为:'+response.data.noteClass,
                  response.data.noteMessage, {
                    confirmButtonText: '前往登陆',
                    callback: action => {
                      this.$router.push("/login")
                    }
                  });
            }else{
              this.isSingIn = false;
              this.SingText = "立即注册"
              this.$message.error(response.data.noteMessage);
            }
          }).catch( error =>{
            this.isSingIn = false;
            this.SingText = "立即注册"
            this.$message.error('请求超时...');
            console.log(error);
          })
        } else {
          this.isSingIn = false;
          this.SingText = "立即注册"
          console.log('error submit!!');
          return false;
        }
      });

    },
    reBack(){
      this.$router.push("/login")
    },
  }
}
</script>

<style scoped>
#singIn{
  width: 100%;
  height: 100%;
  background: url("../../assets/background.png");
}
.myForm {
  width: 500px;
  background-color: rgba(0,0,0,0.7);
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#fromTitle {
  font-size: 18px;
  margin-left: 10%;
  display: block;
  margin-top: 2%;
  margin-bottom: 10px;
  color: #cccccc;
  width: 80%;
  border-bottom: 1px solid #ccc;
}

.inputStyle {
  width: 80%;
  color: #cccccc;
  margin-right: 10%;
}

.buttonStyle{
  width: 36%;
}
.myForm>>>.el-input__inner{
  border-radius: 20px;
  margin-left: 3%;
  background-color: #ffffff;
  /*background-color: rgba(255,255,255,0.8);*/
  transition:all 0.6s;
}
.myForm>>>.el-input__inner{
  transition:all 0.5s;
}
.myForm>>>.el-input__inner:focus{
  transform: scale(1.1);
}
</style>
